Questions
3 of 8
1 What are semantic elements and why do they matter?
2 List all semantic tags and when were they introduced ?
3List all semantic tags and when were they introduced?
4Difference between <div> and <section>?
5What is the use of <nav>?
6What is the purpose of <article> ?
7What is a semantic element?
8Name 3 semantic tags introduced in HTML5?
HTMLHTML
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
03 / 08

List all semantic tags and when were they introduced?

Semantic HTML Tags and Their Introduction

Semantic tags clearly describe the meaning of their content to both browsers and developers. Instead of just telling the browser how something looks, they convey the role or purpose of the content. Many were introduced in HTML5 (2014 W3C Recommendation), while a few existed earlier.

Common Semantic Tags (and Introduction Timeline)
  1. 1<article> (HTML5) – Represents self-contained content such as a blog post or news article.
  2. 2<section> (HTML5) – Defines a thematic grouping of content, typically with a heading.
  3. 3<nav> (HTML5) – Represents a block of navigation links.
  4. 4<header> (HTML5) – Introductory content, often containing a logo, heading, or nav.
  5. 5<footer> (HTML5) – Footer for a document or section, often with copyright or related links.
  6. 6<aside> (HTML5) – Tangential or secondary content, like sidebars or pull quotes.
  7. 7<main> (HTML5) – Represents the dominant content of the page (only one per page).
  8. 8<figure> (HTML5) – Used to group illustrations, diagrams, code snippets, etc.
  9. 9<figcaption> (HTML5) – Caption for a <figure> element.
  10. 10

    <mark> (HTML5) – Highlights or marks text for reference.

  11. 11

    <time> (HTML5) – Represents dates and times in a machine-readable way.

  12. 12<address> (HTML4, improved in HTML5) – Contact information.
  13. 13

    <abbr> (HTML4) – Defines abbreviations/acronyms.

  14. 14

    <cite> (HTML4) – Reference to a creative work (book, article, etc.).

  15. 15

    <code> (HTML4) – Represents inline code snippets.

  16. 16

    <em> (HTML4) – Emphasized text, usually italicized.

  17. 17

    <strong> (HTML4) – Important text, usually bold.

  18. 18

    <q> (HTML4) – Short inline quotation.

  19. 19<blockquote> (HTML4) – Longer quotations, usually indented.
  20. 20<dl>, <dt>, <dd> (HTML4) – Semantic description lists.
  21. 21<legend> and <fieldset> (HTML4) – Provide semantic grouping in forms.
  22. 22

    <label> (HTML4) – Semantic association with form controls.

  23. 23<summary> and <details> (HTML5) – Used for collapsible content sections.
  24. 24

    <bdi> (HTML5) – Bi-directional text isolation.

  25. 25

    <wbr> (HTML5) – Word break opportunity for better text rendering.

Most of the modern layout-related semantic tags like <header>, <footer>, <article>, <aside>, <nav>, <main>, <figure>, and <figcaption> were introduced with HTML5 (2014). Older semantics like <em>, <strong>, <cite>, <code>, <blockquote>, etc., have existed since HTML4 (1997).

Difficulty: 5/10
Topics: HTML5 semantic elements, browser support timeline, accessibility

Scenario Questions

0-2 years experience
  1. 1

    You're building a simple blog page. Which semantic tags would you use for the header, navigation, article content, and footer, and why?

  2. 2

    If you accidentally use a <div> instead of a semantic tag like <nav>, what impact could that have on screen readers or SEO?

2-5 years experience
  1. 1

    Your team inherited a legacy site that uses <div> everywhere. How would you refactor it to use HTML5 semantic tags, and what challenges might you hit with older browsers?

  2. 2

    During QA a screen reader isn't announcing the main content region. Which semantic tag should be present, and how would you confirm it's used correctly?

5-8 years experience
  1. 1

    We need to improve accessibility and SEO for a large e‑commerce platform with thousands of pages. How would you design a migration strategy to introduce semantic tags across the site while minimizing risk and performance impact?

  2. 2

    Explain how the introduction timeline of tags like <header> and <section> influences a progressive‑enhancement approach for users on older browsers.

8+ years experience
  1. 1

    Our company maintains a shared component library used by multiple product teams. How would you standardize the use of semantic tags in that library, and what governance processes would you put in place to ensure consistency over years?

  2. 2

    Consider a legacy monolithic app that must still support IE11. How would you balance the need for modern semantic markup with older‑browser constraints, and what long‑term architectural decisions would you recommend?

Follow-up Questions

  • ❓Which semantic tag would you choose to mark a self‑contained piece of content and why?
  • ❓How do you verify that a screen reader correctly identifies a <main> region?
  • ❓What are the trade‑offs between using <section> versus a generic <div> with ARIA roles?